<template>
	<view class="record">
		<view class="record_tab" v-for="(item, index) in list" :key="index">
			<view class="period">
				<u-image width="80rpx" height="80rpx" :src="item.usr_headimg"></u-image>
			</view>
			<view class="price">
				<view>{{ item.usr_nickname }}</view>
				<view style="color: #b9b9b9;">{{ time(item.luo_created)}}</view>
			</view>
			<view class="number">
				<text>
					{{ item.luo_price }}{{$currency}}	
				</text>
			</view>
			<view class="result">
				<view class="result_cicle" :class="[ item.luo_color == '1' ? 'cgreen' : item.luo_color == '2' ? 'cviolet' : 'cred']" v-if="item.luo_color"></view>
				<view class="result_cicle cblue" v-if="item.luo_number">
					{{item.luo_number}}
				</view>
				<!-- <template v-for="(ems, eindex) in item.color">
					<view class="result_cicle" :class="[ ems == 1 ? 'cgreen' : ems == 2 ? 'cviolet' : 'cred']"></view>
				</template> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data () {
				
		},
		computed: {
		
		},
		methods:{
			time(val) {
				const date = new Date(Number(val)*1000);
				return this.zeroize(date.getHours()) + ':' + this.zeroize(date.getMinutes()) + ':' + this.zeroize(date.getSeconds());
			},
			zeroize(value, length) {
				if(!length) length = 2;
				value = String(value);
				for(var i = 0, zeros = ''; i < (length - value.length); i++) {
					zeros += '0';
				}
				return zeros + value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		padding: 0 36rpx;
		background-color: #fff;
		.cgreen {
			background: #55E273;
		}
		
		.cviolet {
			background: #FF62FF;
		}
		
		.cred {
			background: #FF4343;
		}
		.cblue {
			background: #3A89FF;
		}
		.record_tab {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 0;
			border-top: 2rpx solid #efefef;
			font-size: 28rpx;
			font-family: Roboto, Roboto-Regular;
			font-weight: 400;
			color: #17273a;
			letter-spacing: 0rpx;
		
			.period {
			}
		
			.price {
				flex: 1;
				text-align: center;
			}
		
			.number {
				flex: 1;
				text-align: center;
				
				text {
					color: #FF4343;
				}
			}
		
			.result {
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.result_cicle {
					width: 70rpx;
					line-height: 70rpx;
					color: #FFF;
					font-size: 40rpx;
					height: 70rpx;
					border-radius: 50%;
				
					&:nth-child(n+1) {
						margin-left: 6rpx;
					}
				}
			}
		}
		.tabtitle {
			color: #b9b9b9;
		}
	}
</style>
